<ng-content select="[header]"></ng-content>
<div id="flow-view" class="flow-view" style="position:relative">
  <div id="canvas" class="canvas" style="position:relative; display: block; width: 100%; height: 100%;">
    <div *ngIf="!noPalette" id="palette-container" class="palette-container" style="overflow:hidden;">
      <flo-palette [metamodel]="metamodel" [renderer]="renderer" [paletteSize]="paletteSize"
                   [paletteEntryPadding]="paletteEntryPadding || {width: 12, height: 12}"
                   (onPaletteEntryDrop)="handleDnDFromPalette($event)"
                    (paletteReady)="updatePaletteReadyState($event)"
                    (paletteFocus)="graphToTextSync=true"
                    [searchFilterPlaceHolder]="searchFilterPlaceHolder">
      </flo-palette>
    </div>

    <div id="sidebar-resizer" *ngIf="!noPalette"
      resizer
      [splitSize]="paletteSize"
      (sizeChange)="paletteSize = $event"
      [resizerWidth]="6"
      [resizerLeft]="'#palette-container'"
      [resizerRight]="'#paper-container'">
    </div>

      <flo-editor-paper tabindex="0" (onDelete)="deleteSelected()" (onBlur)="selection = null"
                        (onProperties)="onPropertiesHandle()">
        <div id="paper" class="paper" tabindex="0" style="overflow: hidden; position: absolute; display: block; height:100%; width:100%; overflow:auto;"></div>
        <ng-content select="[canvas]"></ng-content>
      </flo-editor-paper>

      <span class="canvas-controls-container" ng-if="canvasControls">
        <table ng-if="canvasControls.zoom" class="canvas-control zoom-canvas-control">
          <tbody>
            <tr>
              <td>
                <input class="zoom-canvas-input canvas-control zoom-canvas-control" type="text"
                       data-inline="true" [(ngModel)]="zoomPercent"
                       size="3">
              </td>
              <td>
                <label class="canvas-control zoom-canvas-label">%</label>
              </td>
              <td>
                <input type="range" data-inline="true" [(ngModel)]="zoomPercent"
                       [step]="zoomStep"
                       [max]="maxZoom" [min]="minZoom" data-type="range"
                       name="range" class="canvas-control zoom-canvas-control">
              </td>
            </tr>
          </tbody>
        </table>
      </span>

  </div>
</div>
<ng-content select="[footer]"></ng-content>

